<template>
	<div class="back_contain_n">
		<div class="top">
			质量数据合格率分析报表
		</div>

		<div class="bottom">
			<div class="row">
				<div class="tableBox">
					<div class="tableHeader">
						<div class="tableList" style="margin-top: 0;margin-bottom: 15px;">
							<table>
								<tr>
									<th width="220px">工序品类</th>
									<th width="220px">检项数(个)</th>
									<th width="220px">检测总数(次)</th>
									<th width="220px">合格(次)</th>
									<th width="220px">不合格(次)</th>
									<th >合格率</th>
								</tr>

							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="row2" style="margin-bottom: 15px;">
				<div class="select">
					<el-select v-model="year" placeholder="" @change="hancleChange"> 
						<el-option v-for="item in yearsList" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</div>
				<div class="tableBox zll-table">
					<el-table v-loading="tableLoading1" :data="tableData1" :show-header="false" border style="width: 100%;">
						<el-table-column prop="gongxu" align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="jxs"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="hgs"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="hgs"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="bhg"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="hgl"  align="center"  >
							<template slot-scope="scope" >
								<span style="color: #4caf50;">{{scope.row.hgl}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="row2">
				<div class="select">
					<el-select v-model="month" placeholder="" @change="getList2">
						<el-option v-for="item in monthsList" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</div>
				<div class="tableBox zll-table">
					<el-table v-loading="tableLoading2" :data="tableData2" :show-header="false" border style="width: 100%;">
						<el-table-column prop="gongxu"  align="center" width="220px">
						</el-table-column>
						<el-table-column prop="jxs"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="hgs"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="hgs"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="bhg"  align="center"  width="220px">
						</el-table-column>
						<el-table-column prop="hgl"  align="center"  >
							<template slot-scope="scope" >
								<span style="color: #4caf50;">{{scope.row.hgl}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				tableData1: [],
				tableData2: [],
				tableLoading1:false,
				tableLoading2:false,
				yearsList: [],
				monthsList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				year: (new Date().getFullYear())+'年',
				month: (new Date().getMonth() + 1)+'月',

			}
		},
		methods: {
			hancleChange(){
				this.getList1();
				this.getList2();
			},
			getRecentYears(count) {
				const current = new Date().getFullYear();
				return Array.from({ length: count }, (_, i) => (current - (count - 1) + i) + '年');
			},
			getList1() {
				this.tableLoading1 = true;
				let params = {
					startTime: this.year.split("年").join("") 
				}
				this.$http({
					url: "/jinl/checkLine/getQualityAnalysisList",
					method: "post",
					data: JSON.stringify(params),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					this.tableLoading1 = false;
					if(resp.success){
						this.tableData1  = resp.result;
					}
				});
			},
			getList2() {
				this.tableLoading2 = true;
				let params = {
					startTime: this.year.split("年").join("-") + this.month.split("月").join("")
				}
				this.$http({
					url: "/jinl/checkLine/getQualityAnalysisList",
					method: "post",
					data: JSON.stringify(params),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					this.tableLoading2 = false;
					if(resp.success){
						this.tableData2  = resp.result;
					}
				});
			}

		},
		created() {
			this.yearsList = this.getRecentYears(3);
		},
		mounted() {
			this.getList1();
			this.getList2();
		},

		components: {},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.select {
		::v-deep .el-input--suffix .el-input__inner {
			text-align: center;
		}
	}

	.top {
		padding-left: 200px;
		text-align: center;
		font-size: 18px;
		color: #333;
		height: 30px;
		line-height: 30px;
	}

	.bottom {
		

		.row {
			padding-left: 200px;
			margin-top: 15px;
		}

		.row2 {
			display: flex;
			/* margin-bottom: 15px; */
		}

		.select {
			width: 200px;
			padding-right: 20px;
			overflow: hidden;
		}

		.tableBox {
			flex: 1;
			overflow: hidden;
		}
	}

	.tableList {
		margin-top: 20px;
		position: relative;

		table {
			width: 100%;
			border-collapse: collapse;
			border: 1px solid #e6e6e6;
			text-align: center;
			table-layout: fixed;

			th {
				background: #ddd;
				color: #918d8d;
				padding: 3px;
				font-weight: normal;
				height: 26px;
				line-height: 26px;
			}

			td {
				padding: 3px;
				height: 26px;
				line-height: 26px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				p {
					padding: 0 5px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				span {
					color: #1890ff;
					cursor: pointer;
					margin: 0 5px;

					&:hover {
						opacity: .8;
					}
				}
			}

			.noData {
				color: #918d8d;
			}

			tr {
				background: #FAFAFA;
				border: 1px solid #EBEEF5;

				&:nth-of-type(2n) {
					background: #fff;
				}
			}
		}
	}
	.zll-table {
        .el-table th {
            font-size: 12px;
        }
        .el-table__cell {
            .el-tag {
                width: 60px;
                height: 26px;
                line-height: 26px;
                padding: 0;
                &.cancel_tag {
                    background: #fff;
                    border-color: #eee;
                    color: #ccc;
                }
            }   
        }
        &.inspect-box_table {
            .el-table .cell {
                span {
                    &.ws {
                        margin: 0 1px;
                        color: #4caf50;
                    }
                    &.abnormal1 {
                        color: #fb2516;
                    }
                    &.abnormal2 {
                        color: #fb2516;
                    }
                }
            }
        }
    }
</style>